<div [ngClass]="{'dark-theme': isDarkTheme | async}" class="upload_outer_container">
  <div class="mat-dialog-inner-container mat-app-background upload_container">
    <h2 mat-dialog-title>Upload Torrents</h2>
    <mat-dialog-content class="mat-typography dialog_content">
      <mat-tab-group mat-align-tabs="start" (selectedTabChange)="handleTabChange($event)" [selectedIndex]="currentTab?.index || 0">
        <mat-tab label="File Upload">
          <div class="file_upload_container">
            <br/>

            <div [ngClass]="{'dark-theme': isDarkTheme | async}" class="upload_files" appDragAndDropFiles (fileDropped)="updateFiles($event, true)" (click)="torrentFileUpload.click()">
              <h4>Drag and drop files here</h4>
              <h4>or</h4>

              <button color="primary" mat-flat-button>
                <mat-icon>attach_file</mat-icon>
                &nbsp; Browse for files
              </button>

              <button *ngIf="hasUploadedFiles()" color="warn" mat-stroked-button (click)="clearUploadedFiles($event)" style="margin-top: 10px;">
                <mat-icon>close</mat-icon>
                Clear selection
              </button>

              <br/>
              <h4 *ngIf="!show_torrent_contents">
                <i> {{getFilesToUploadString()}} </i>
              </h4>

              <input multiple #torrentFileUpload type="file" accept=".torrent" id="torrentFileUpload" (change)="updateFiles($event)">
            </div>
            <br/>
        </div>
        </mat-tab>

        <mat-tab label="Magnet URL">
          <br/>
          <mat-form-field id="magnet_url_input" appearance="outline">
            <mat-label>List of URLs...</mat-label>
            <textarea rows="17" value="{{urlsToUpload}}" name="savepath" type="text" id="savepath" (change)="updateURLsToUpload($event)" matInput></textarea>
            <mat-hint align="start">Separate each URL with a new line</mat-hint>
          </mat-form-field>
        </mat-tab>
      </mat-tab-group>
      <br/>

      <mat-divider></mat-divider>
      <br/>

      <h3>Save Location</h3>
      <p>Pick a location to save the files. If none is chosen, the default shown will be used instead.</p>

      <div id="choose_save_location">
        <mat-form-field appearance="outline">
          <mat-label>Download To...</mat-label>
          <input value="{{filesDestination}}" name="savepath" type="text" id="savepath" (change)="updateFileDestination($event)" matInput >
          <mat-icon matSuffix>folder_open</mat-icon>
        </mat-form-field>

        <button id="trigger_file_explorer" color="primary" mat-raised-button (click)="openFileSystemExplorerDialog($event)">
          <mat-icon>folder</mat-icon>
          &nbsp; Choose Location
        </button>
      </div>
      <br/>
    </mat-dialog-content>

    <mat-dialog-actions align="end">
      <button disabled={{isLoading}} mat-button [mat-dialog-close]="true">Cancel</button>
      <button disabled={{isUploadDisabled()}} mat-raised-button (click)="handleUpload()" color="primary" cdkFocusInitial>Upload</button>
    </mat-dialog-actions>
    <br/>
  </div>

  <div *ngIf="show_torrent_contents && hasUploadedFiles()" [ngClass]="isOnFileUploadTab() ? '' : 'hidden'" class="mat-app-background torrent_contents_container">
    <h3> Torrent Contents </h3>
    <mat-card-subtitle *ngIf="!hasUploadedFiles()">
      <i> Try uploading some files first. </i>
    </mat-card-subtitle>

    <div class="files_in_torrents">
      <app-file-system-tree-explorer
      [showProgress]="false"
      [directories]="serialized_nodes"> </app-file-system-tree-explorer>
    </div>
  </div>
</div>
